<!-- 页面 -->
<template>
    <div class="dl">
        <div class="img1">
            <img src="http://xl.9yuecloud.com/assets/img/login.a4c656a9.png" alt="">
        </div>
        <div class="ddl">
            <van-cell-group>
                <van-field v-model="username" label="用户名" placeholder="用户名" />
                <van-field v-model="password" label="密码" placeholder="密码" />
            </van-cell-group>
            <div class="dd2">
                <span>找回密码</span><span class="zc">注册/验证码登录</span>
            </div>


            <van-button type="warning" block round color="#fd6614" @click="add">登录</van-button>
            <van-button class="san" type="warning" color="white" block>第三方登录</van-button>
            <van-button color="white" style="width: 49%;" class="san"><van-icon size="50px" color="#78c660"
                    name="wechat" />微信登录</van-button>
            <span style="width: 2%;">|</span>
            <van-button color="white" style="width: 49%;" class="san"><img
                    src="https://img.ixintu.com/download/jpg/20200928/a7d4611dcb249b293bfc7da6a490ff5a_512_512.jpg!con"
                    alt=""> QQ登录</van-button>
        </div>
        <van-sticky :offset-top="600">
            <you></you>
        </van-sticky>
    </div>
</template>
<!-- vue -->
<script>
import { Notify } from 'vant';
import you from '@/components/you.vue'
export default {
    components: {
        you,
    },
    data() {
        return {
            // 声明的属性
            list: [],
            username: '',
            password: '',

        }
    },
    //生命周期函数
    mounted() {
        
    },
    // 调用方法
    methods: {
        add() {
            if (this.username == 'admin' || this.password == '123456') {
                // 成功通知
                Notify({ type: 'success', message: '登录成功' });
                this.$router.push('/shou')
            } else {
                // 危险通知
                Notify({ type: 'danger', message: '登录失败' });
            }
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.dl {
    width: 100%;
    height: 100%;
}

.dl img {
    width: 90%;
}

.dl .img1 {
    height: 120px;
    width: 100%;
    margin-top: 50px;
}

.dl .ddl {
    margin: auto;
    width: 300px;
    height: 300px;
}

.dl .dd2 {
    margin: auto;
    width: 100%;
    height: 50px;
}

.zc {
    float: right;
}

.san {
    color: black !important;
    font-size: 19px;
}

.san img {
    width: 50px;
}
</style>